<!DOCTYPE html>
<html lang="en">
<head>
	<!-- The jQuery library is a prerequisite for all jqSuite products -->
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<!-- We support more than 40 localizations -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
	<!-- This is the Javascript file of jqGrid -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
	<!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css" />
	<script>
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.styleUI = 'Bootstrap';
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<meta charset="utf-8" />
	<title>jqGrid Loading Data - XML</title>
</head>
<body>
<div style="margin-left:20px">
	<table id="jqGrid"></table>
	<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
	$(document).ready(function () {
		$("#jqGrid").jqGrid({
			url: 'xml/loadFromXml.xml',
			datatype: "xml",
			colModel: [
				{ label: 'Inv No', name: 'id', width: 75, sorttype:'integer', formatter:'integer' },
				{ label: 'Date', name: 'invdate', width: 90 },
				{ label: 'Client', name: 'name', width: 100 },
				{ label: 'Amount', name: 'amount', width: 80 },
				{ label: 'Tax', name: 'tax', width: 80 },
				{ label: 'Total', name: 'total', width: 80 },
				{ label: 'Notes', name: 'note', width: 150 }
			],
			width: 780,
			loadonce: true,
			rowNum: 10,
			rowList: [10, 20, 30],
			pager: '#jqGridPager',
			sortname: 'id',
			viewrecords: true,
			sortorder: "desc",
			caption: "Load Data - XML"
		}).navGrid('#jqGridPager', { edit: false, add: false, del: false });
	});
</script>
</body>
</html>